<template>
	<view class="wanl-money">
		<cust-header title="我的钱包">
			<template v-slot:header>

			</template>
			<view class="main-wrap u-flex-col wrap u-row-center u-rela">
				<view class="u-m-t-32 white-bg">
					<view class="line">
						<view class="item" @click="$wanlshop.to('/pages/user/money/list?type=0')">
							<view class="title">
								<view>总资产(元)</view>
								<view class="icon">
									<u-icon name="arrow-right" class="icon"></u-icon>
								</view>
							</view>
							<view class="value">
								{{ item.total_balance }}
							</view>
						</view>

						<view class="item" @click="$wanlshop.to('commission-list/commission-list')">
							<view class="title">
								<view>
									总佣金(元)
								</view>
								<view class="icon">
									<u-icon name="arrow-right" class="icon"></u-icon>
								</view>
							</view>
							<view class="value">
								{{ item.commission }}
							</view>
						</view>
					</view>

					<view class="line" style="margin-top: 76rpx;">
						<view class="item">
							<view class="title">可提现(元)</view>
							<view class="value">
								{{ item.current_balance }}
							</view>
						</view>

						<view class="item" @click="$wanlshop.to('withdraw-list/withdraw-list')">
							<view class="title gray-color">
								<view>提现记录</view>
								<view class="icon">
									<u-icon name="arrow-right" class="icon"></u-icon>
								</view>
							</view>
							<view class="value"> </view>
						</view>
					</view>

					<view class="line small moneys" style="margin-top: 40rpx;">
						<view class="item">
							<view class="title">冻结资金(元)</view>
							<view class="value">
								{{ item.freeze_balance }}
							</view>
						</view>
						<view class="item">
							<view class="title">提现中(元)</view>
							<view class="value">
								{{ item.withdraw_in }}
							</view>
						</view>
						<view class="item">
							<view class="title">已提现(元)</view>
							<view class="value">
								{{ item.withdraw }}
							</view>
						</view>
						<view class="item">
							<view class="title">保证金(元)</view>
							<view class="value">
								{{ item.bonds }}
								<view class="ml24 f28 primary mt8" v-if="item.bonds<500" @click="btnbonds">
									保证金补齐
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>


			<view class="btn m-shop btn-color main-btn" @click="$wanlshop.to('/pages/user/money/withdraw')">立即提现
			</view>

		</cust-header>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				item: {}
			};
		},
		computed: {
			...mapState(['user'])
		},
		onLoad() {
			console.log(this.$store.state);
			this.loadData();
		},
		onPullDownRefresh() {},
		onNavigationBarButtonTap(e) {},
		onReachBottom() {},
		methods: {
			btnbonds() {
				let _this = this
				uni.showModal({
					title: '保证金补齐',
					content: '将自动从账户余额(总资产)扣除金额，补齐500保证金',
					success: function(res) {
						if (res.confirm) {
							_this.completionBonds()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			completionBonds() {
				this.$api.post({
					url: '/store.store/completionBonds',
					success: res => {
						this.loadData()
					}
				})
			},
			async loadData() {
				this.$api.get({
					url: '/store/store/shopMoney',
					success: res => {
						this.item = res
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/all.scss";

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 24rpx;
		background: #ffffff;
	}

	.moneys {
		flex-wrap: wrap;

		.item {
			margin-bottom: 24rpx;
			width: 50%;
		}
	}

	.white-bg {
		color: #000000;
		padding: 40rpx;
		border-radius: 20rpx;
	}

	.line {
		display: flex;
		justify-content: space-between;


		.item {
			display: flex;
			flex-direction: column;

			.title {
				display: flex;
				font-weight: 500;
				font-size: 28rpx;
				color: #3D3D3D;
				line-height: 40rpx;
			}

			.icon {
				display: flex;
				color: #999999;
			}

			.value {
				display: flex;
				font-weight: 700;
				font-size: 48rpx;
				color: #333333;
				line-height: 1.4;
			}
		}
	}

	.line.small .value {
		font-size: 36rpx;
	}

	.gray-color {
		color: #999999 !important;
	}

	.main-wrap {
		background: linear-gradient(217deg, #3065FA 0%, #2D94F3 72%);
		background-size: 100% 360rpx;
		background-repeat: no-repeat;
	}

	.wrapper {
		position: relative;
		width: 800px;
		height: 375px;

		border: 1px dashed red;
		overflow: hidden;

		&.bg {
			background: linear-gradient(217deg, #3065FA 0%, #2D94F3 72%);
		}
	}

	.left {
		position: absolute;
		left: -1040px;
		top: 50%;
		width: 1200px;
		height: 1200px;
		border: 6px solid white;
		border-radius: 50%;
		transform: translateY(-50%);
		overflow: hidden;
	}
</style>